<template>
    <div
      class="container"
      v-infinite-scroll="load"
      :infinite-scroll-immediate="false"
    >
      <span class="title">专辑</span>
      <div class="type_list">
        <div class="item">
          <span>标签</span>
          <div class="tags">
            <el-tag
              round
              @click="tagChange(index)"
              :effect="tagCurrent == index ? 'dark' : 'plain'"
              v-for="(item, index) in tagList"
              :key="index"
              >{{ item.name }}</el-tag
            >
          </div>
        </div>
        <div class="item">
          <span>风格</span>
          <div class="tags">
            <el-tag
              round
              @click="styleChange(index)"
              :effect="styleCurrent == index ? 'dark' : 'plain'"
              v-for="(item, index) in styleList"
              :key="index"
              >{{ item.name }}</el-tag
            >
          </div>
        </div>
        <div class="item">
          <span>场景</span>
          <div class="tags">
            <el-tag
              round
              @click="scenesChange(index)"
              :effect="scenesCurrent == index ? 'dark' : 'plain'"
              v-for="(item, index) in scenesList"
              :key="index"
              >{{ item.name }}</el-tag
            >
          </div>
        </div>
        <div class="item">
          <span>情绪</span>
          <div class="tags">
            <el-tag
              round
              @click="feelChange(index)"
              :effect="feelCurrent == index ? 'dark' : 'plain'"
              v-for="(item, index) in feelList"
              :key="index"
              >{{ item.name }}</el-tag
            >
          </div>
        </div>
      </div>
  
      <div class="content_list">
        <div
          class="item"
          @click="getSongsInfo(item)"
          v-for="(item, index) in songList"
          :key="index"
        >
          <div
            class="cover"
            @mouseenter="isFocus = index"
            @mouseleave="isFocus = null"
          >
            <el-image :src="baseUrl + item.image" />
            <div class="mask" v-if="isFocus == index">
              <i
                :class="[
                  isFocus == index ? 'zoomIn' : '',
                  'iconfont',
                  'icon-bofang',
                ]"
              ></i>
            </div>
            <div class="measure">
              <el-icon><CaretRight /></el-icon>
              <span>{{ numberFilter(item.views) }}</span>
            </div>
            <div class="classify">
              <span>{{ item.user.nickname }}</span>
            </div>
          </div>
          <span>{{ item.desc }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import {
    albumIndex,
    tagIndex,
    styleIndex,
    feelIndex,
    scenesIndex,
    albumInfo,
  } from "@/http/api";
  import { PersistentStore } from "@/stores";
  const persistentStore = PersistentStore();
  const router = useRouter();
  
  const baseUrl = import.meta.env.VITE_API_URL;
  
  const isFocus = ref();
  
  const isReady = ref(false);
  const more = ref(true);
  
  const songList = ref([]);
  const tagList = ref([]);
  const styleList = ref([]);
  const feelList = ref([]);
  const scenesList = ref([]);
  
  const tagCurrent = ref(0);
  const styleCurrent = ref(0);
  const feelCurrent = ref(0);
  const scenesCurrent = ref(0);
  const page = ref(1);
  
  onMounted(() => {
    Promise.all([getTag(), getStyle(), getFeel(), getScenes()]).then(() => {
      isReady.value = true;
      getList();
    });
  });
  
  const numberFilter = (e) => {
    let num = "";
    if (e > 10000) {
      num = (e / 10000).toFixed(2);
      return num + "万";
    } else {
      return e;
    }
  };
  
  const getList = async () => {
    const { data } = await albumIndex({
      page: page.value,
      limit: 21,
      tag: tagList.value[tagCurrent.value].id,
      style: styleList.value[styleCurrent.value].id,
      scenes: scenesList.value[scenesCurrent.value].id,
      feel: feelList.value[feelCurrent.value].id,
    });
    data.album.data.length
      ? songList.value.push(...data.album.data)
      : (more.value = false);
  };
  
  const getSongsInfo = async (e) => {
    const { data } = await albumInfo({
      id: e.id,
    });
    const url = router.resolve("/play_music");
    const arr = {
      id: e.id,
      index: 0,
      list: data.album.list,
    };
    persistentStore.setSongListInfo(arr);
    window.open(url.href, url.href).postMessage(JSON.stringify(arr));
  };
  
  const tagChange = (i) => {
    tagCurrent.value = i;
    initList();
  };
  
  const styleChange = (i) => {
    styleCurrent.value = i;
    initList();
  };
  
  const feelChange = (i) => {
    feelCurrent.value = i;
    initList();
  };
  
  const scenesChange = (i) => {
    scenesCurrent.value = i;
    initList();
  };
  
  const initList = () => {
    page.value = 1;
    songList.value = [];
    more.value = true;
    getList();
  };
  
  // 筛选条件
  const getTag = async () => {
    const { data } = await tagIndex();
    tagList.value = [
      {
        name: "全部",
        id: "",
      },
      ...data.tag,
    ];
  };
  const getStyle = async () => {
    const { data } = await styleIndex();
    styleList.value = [
      {
        name: "全部",
        id: "",
      },
      ...data.style,
    ];
  };
  const getFeel = async () => {
    const { data } = await feelIndex();
    feelList.value = [
      {
        name: "全部",
        id: "",
      },
      ...data.feel,
    ];
  };
  const getScenes = async () => {
    const { data } = await scenesIndex();
    scenesList.value = [
      {
        name: "全部",
        id: "",
      },
      ...data.scenes,
    ];
  };
  
  const load = () => {
    if (more.value && isReady.value) {
      page.value++;
      getList();
    }
  };
  </script>
  
  <style lang="scss" scoped>
  @import "index.scss";
  </style>
  